<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/4/5
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>


<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Our-Iot</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css"></head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/picture.css"></head>

<style>


</style>


<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">IOT-NB</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/main.jsp">首页</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="">IOT实训室</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="http://www.chuangkexueyuan.com.cn/iot-baidu.html">物联网之路</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="http://www.nlecloud.com/iot2019/">最新赛事</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="https://jwc.ccu.edu.cn/">教育教学</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="http://www.chinawuliu.com.cn/xsyj/201807/16/332957.shtml">学术研究</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/honer.jsp">光辉战绩</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    ${sessionScope.phone}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="${pageContext.request.contextPath}/user/changeUser">切换用户</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/user/outLogin">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/user/cancelUser?phone=${sessionScope.phone}">注销用户</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">学习资源</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">java后台开发</a></dd>
                        <dd><a href="javascript:;">嵌入式工程</a></dd>
                        <dd><a href="javascript:;">安卓开发</a></dd>
                        <dd><a href="">the links</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">Iot风采</a>
                    <dl class="layui-nav-child">
                        <dd><a href="${pageContext.request.contextPath}/getAlbums">相册管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">menu item 123</a></li>
                <li class="layui-nav-item"><a href="">the links</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body" style=" z-index: 0; background-image: url('/img/1.jpg')" >
        <!-- 内容主体区域 -->
        <div  id="imgDefault" >
            <c:forEach items="${pictures}" var="picture">
                <img class="imgItem" data-src="http://192.168.170.130/${picture.dfsFileId}" src="http://192.168.170.130/${picture.dfsFileId}">
            </c:forEach>
            </div>
    </div>
        <script>
            (function(){
                var LightBox = function(options){
                    this.imgListParent = document.getElementById(options.imgListParent);   //图片列表的父元素
                    this.imgItemClass = options.imgItemClass;   //图片的className
                    this.idx = 0;  //图片的索引，初始值为0
                    this.isShowPage = options.isShowPage || false;    //是否显示分页，默认不显示
                    this.init();
                };
                //初始化
                LightBox.prototype.init = function(){
                    this.renderDOM();
                    this.imgListClick();
                    this.nextBtnClick();
                    this.prevBtnClick();
                    this.closeBtnClick();
                };
                //渲染弹窗
                LightBox.prototype.renderDOM = function(){
                    var imgModule = document.createElement("div");
                    imgModule.id = "imgModule";

                    var oHtml = "";
                    oHtml +=    '<div class="lightBox">';
                    oHtml +=        '<div class="lightBoxContent">';
                    oHtml +=            '<img src="images/loading.gif" alt="" id="imgLoader"/>';
                    oHtml +=            '<img alt="" id="imgLight"/>';
                    oHtml +=        '</div>';
                    oHtml +=        '<span class="btn lightBoxSprite" id="lightBoxPrev"></span>';
                    oHtml +=        '<span class="btn lightBoxSprite" id="lightBoxNext"></span>';
                    oHtml +=        '<span class="closeBtn lightBoxSprite" id="closeBtn"></span>';
                    oHtml +=    '</div>';

                    imgModule.innerHTML = oHtml;
                    document.body.appendChild(imgModule);
                };
                //分页
                LightBox.prototype.pagination = function(idx){
                    var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
                    var pagination = document.getElementById("lightBoxPagination");
                    var page = "";

                    for(var i = 0; i < imgList.length; i++){
                        if(idx == i){
                            page += '<span class="current"></span>';
                        }else{
                            page += '<span></span>';
                        }
                    }

                };
                //点击图片弹出弹窗
                LightBox.prototype.imgListClick = function(){
                    var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
                    var imgModule = document.getElementById("imgModule");
                    var self = this;

                    for(var i = 0; i < imgList.length; i++){
                        imgList[i].index = i;

                        imgList[i].onclick = function(){
                            imgModule.style.display = "block";
                            var src = this.getAttribute("data-src");
                            self.idx = this.index;

                            self.imgLoad(src);
                            self.pagination(self.idx);
                        }
                    }
                };
                //上一张
                LightBox.prototype.prevBtnClick = function(){
                    var prevBtn = document.getElementById("lightBoxPrev");
                    var self = this;

                    prevBtn.onclick = function(){
                        var imgList = self.getByClass(self.imgListParent, self.imgItemClass);

                        self.idx--;

                        if(self.idx < 0){
                            self.idx = imgList.length - 1;
                        }

                        var src = imgList[self.idx].getAttribute("data-src");
                        self.imgLoad(src);
                        self.pagination(self.idx);
                    }
                };
                //下一张
                LightBox.prototype.nextBtnClick = function(){
                    var nextBtn = document.getElementById("lightBoxNext");
                    var self = this;

                    nextBtn.onclick = function(){
                        var imgList = self.getByClass(self.imgListParent, self.imgItemClass);

                        self.idx++;

                        if(self.idx >= imgList.length){
                            self.idx = 0;
                        }

                        var src = imgList[self.idx].getAttribute("data-src");
                        self.imgLoad(src);
                        self.pagination(self.idx);
                    }
                };
                //图片预加载
                LightBox.prototype.imgLoad = function(src, callback){
                    var imgLight = document.getElementById("imgLight");
                    var loader = document.getElementById("imgLoader");
                    loader.style.display = "block";
                    // imgLight.src = "";

                    var img = new Image();
                    img.onload = function(){
                        loader.style.display = "none";
                        imgLight.src = src;
                    };
                    img.src = src;
                };
                //关闭弹窗
                LightBox.prototype.closeBtnClick = function(){
                    var closeBtn = document.getElementById("closeBtn");
                    var imgModule = document.getElementById("imgModule");

                    closeBtn.onclick = function(){
                        imgModule.style.display = "none";
                    }
                };
                //封装获取元素函数
                LightBox.prototype.getByClass = function(oParent, oClass){
                    var oEle = oParent.getElementsByTagName("*");
                    var oResult = [];

                    for(var i = 0; i < oEle.length; i++){
                        if(oEle[i].className == oClass){
                            oResult.push(oEle[i]);
                        }
                    }
                    return oResult;
                };
                window.LightBox = LightBox;
            })();

            new LightBox({
                imgListParent: "imgDefault",
                imgItemClass: "imgItem",
                isShowPage: true
            });
        </script>
    <div class="layui-footer" style="background-color: #746047")>
        <!-- 底部固定区域 -->
    </div>
</div>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });

</script>
</body>


</html>
